<template>
  <div>

    <div class="time-interval-cell"   @click="show = true">
      <div class="time-icon">
        <img
              class="arrow__pic__img"
              :src="require('@/assets/time-interval.svg')"
              alt=""
            />
      </div>
      <div class="time-title">{{ label }}</div>
      <div  class="time-value">{{ dateTime ? dateTime : placeholder }}</div>
    </div>


    <van-calendar
       ref="calendar"
      type="range"
      :max-range="30" 
      :min-date="minDate" 
      :max-date="maxDate"
      :allow-same-day="true"
      :default-date="defaultDate"
      v-model:show="show"
      @open="open"
      @confirm="onConfirm"
    />
  </div>
</template>

<script>
import dayjs from "dayjs"
import { Calendar as VanCalendar, Cell as VanCell } from "vant";
const formatDate = (date) =>
  `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;

export default {
  name: "TimeInterval",
  components: { VanCalendar, VanCell },
  props: {
    label: {
      type: String,
      default: "",
    },
    defaultDate:{
      type:Array,
      default:()=>{
        return [new Date(),new Date()]
      }
    },
    minDate:{
      type: Date,
      default: new Date(2022, 0, 1),
    },
    maxDate:{
      type: Date,
      default: new Date(2025, 0, 1),
    },
    placeholder: {
      type: String,
      default: "请选择时间区间",
    },
    modelValue: {},
  },
  data() {
    return {
      dateTime: `${formatDate(new Date())} - ${formatDate(new Date())}`,
      show: false,
    };
  },
  watch: {
    modelValue: {
      // 数据变化时执行的逻辑代码
      handler(newValue, oldValue) {
        if (newValue&&newValue.length==0) {
          this.dateTime = "";
          this.$refs.calendar.reset();
        }
      },
      // 开启深度监听
      deep: true,
    },
  },
  methods: {
    open() {},
    onConfirm(values) {
        const [start, end] = values;
         this.$emit("update:modelValue", values);
         this.dateTime = `${formatDate(start)} - ${formatDate(end)}`;
         this.show = false;
    },
  },
};
</script>


<style lang="less"  scoped>
.time-interval-cell{
  display: flex;
  align-items: center;
  padding:20px 20px 15px;
  .time-icon{
    width: 18px;
    height: 18px;
    margin-right: 15px;
    img{
      width: 100%;
    }
  }
  .time-title{
    color: #1C1243;
    font-size: 14px;
    font-weight: 600;
    margin-right: 20px;
  }
  .time-value{
    color: #1C1243;
    font-size: 14px;
  }
}
</style>